<template>
    <div id="qianbao">
        <Head/>
        <div class="qianbao  ">
            <el-row>
                <el-col :span="8" :sm="8" :xs="12" :style="boDer">
                    <el-col :span="8" :sm="8" :xs="24" class="photos"><img src="../../assets/3.jpg" alt="">
                    </el-col>
                    <el-col :span="16" :sm="16" :xs="24" :style="names" class="names">
                        <router-link to="" :style="namesA">这个名字可以吧</router-link>
                        <p :style="namesP">已绑定手机</p>
                    </el-col>
                </el-col>
                <el-col class="zhanghuyue" :span="8" :sm="8" :xs="12" :style="boDer">
                    <div class="zhanghu "><p>账户余额</p><b>0</b><b>.00元</b></div>
                    <div class="yue">
                        <button>提现</button>
                        <p><i class="">*</i>当前余额不足</p>
                    </div>
                </el-col>
                <el-col :span="8" :sm="8" :xs="24" :style="boDer1" class="Zhuyi">
                    <li class="userwenti" v-for="(item,index) in list" :key="index">
                        <p>{{item.textP}}</p>
                        <router-link to="">{{item.textA}}</router-link>
                    </li>
                </el-col>
            </el-row>
            <div class="userTl">
                <el-row>
                    <el-col :span="4" :sm="3" :xs="4" :style="userTable">
                        <p>时间</p>
                    </el-col>
                    <el-col :span="4" :sm="5" :xs="4" :style="userTable">
                        <p>类型</p>
                    </el-col>
                    <el-col :span="4" :sm="8" :xs="4" :style="userTable">
                        <p>详情</p>
                    </el-col>
                    <el-col :span="4" :sm="5" :xs="4" :style="userTable">
                        <p>金额</p>
                    </el-col>
                    <el-col class="zhuangtai" :span="4" :sm="3" :xs="4" :style="userTable">
                        <p>状态</p>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="Goback hiddem-xs-only">
            <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
                <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link>
            </li>
        </div>
    </div>
</template>

<script>
    import 'element-ui/lib/theme-chalk/display.css'
    import Head from '../Head'

    export default ({
        name: 'qianbao',
        data() {
            return {
                list: [
                    {textP: '每次提现最小额度为￥100.00', textA: ''},
                    {textP: '提现会在 3-5 个工作日内到账', textA: ''},
                    {textP: '结算后的收益，提现不再收取手续费', textA: ''},
                    {textP: '', textA: '收入结算与提现常见问题'},
                ],
                boDer: {
                    paddingLeft: '5%',
                    borderRight: '1px solid #969696'
                },
                boDer1: {
                    paddingLeft: '5%',
                },
                names: {
                    padding: '15px 10% 0 0',
                },
                namesA: {
                    fontSize: '21px',
                    color: '#333333'
                },
                namesP: {
                    fontSize: '13px',
                    color: '#969696'
                },
                userTable: {
                    paddingLeft: '3%',
                    borderRight: '1px dashed #969696'
                },

            }
        },
        methods: {
            changeTabs(index) {
                this.isActives = index;
            }
        },
        components: {
            Head
        }
    })
</script>

<style scoped>
    /* 手机样式 */
    .xx p {
        color: #969696;
        padding-left: 10%;
        font-size: 20%;
    }

    .xx b:nth-of-type(1) {
        font-size: 2em;
    }

    .xx button {
        background-color: #fff;
        color: #42c02e;
        border: 1px solid #42c02e;
        border-radius: 25px;
        padding: 3% 10% 3% 10%;
        margin-left: 10%;
        margin-top: 2px;
    }

    /* 结束 */

    #qianbao {
        margin: 0px auto;
        padding-top: 80px !important;
        width: 65%;
    }

    .photos {
        margin-left: -35px;
    }

    .qianbao img {
        width: 74px;
        height: 74px;
        border-radius: 50%;
    }

    .zhanghu p {
        margin-top: 8px;
        font-size: 16px;
        color: #969696;
        float: left;

    }

    .zhanghu b:nth-of-type(1) {
        font-size: 28px;
        margin-left: 10%;
    }

    .zhanghu b {
        font-size: 18px;
        color: #333333;

    }

    .yue {
        margin-top: 20px;
    }

    .yue button {
        float: left;
        background-color: #fff;
        color: #42c02e;
        border: 1px solid #42c02e;
        font-size: 17px;
        padding: 3% 10% 3% 10%;

        border-radius: 25px;
    }

    .yue p {
        line-height: 33px;
        font-size: 13px;
        color: #969696;
        padding-left: 40%;
    }

    .userwenti {
        line-height: 20px;
        font-size: 13px;
        color: #969696;
        list-style: none;
    }

    .userwenti a {
        color: #3194d0;
    }

    .userTl {
        border: 1px solid #DCDCDC;
        margin-top: 50px;
        border-radius: 6px 6px 0 0;
        padding: 30px 0 30px 0px;
    }

    .zhuangtai {
        border: 0 !important;
    }

    .actives {
        background-color: #f0f0f0;
        color: #ff4f4c;
    }

    .Goback li {
        text-align: center;
        line-height: 50px;
        position: fixed;
        bottom: 30px;
        left: 30px;
        background-color: #b3b3b3;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        font-size: 35px;
        opacity: 0.5;
    }

    .Goback li i {
        color: #fff;
    }

    @media screen and (max-width: 750px) {
        #qianbao {
            width: 90%;
            padding: 0 5% 0 5%;
        }

        .photos {
            margin-left: 0;
        }

        .names a {
            font-size: 18px !important;
            display: block;
            margin-bottom: 5px !important;
        }

        .zhanghuyue {
            border: 0 !important;
            line-height: 50px;
        }

        .yue button {
            clear: both;
            /*margin-right: 100px;*/
        }

        .yue p {
            clear: both;
            padding-left: 0;
            /*width: 100%;*/
        }

        .Zhuyi {
            padding: 5px 0 5px 5px;
            border: 1px solid #b3b3b3;
            border-radius: 3px;
            margin-top: 20px;
        }
    }
</style>